﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />


    <link rel="stylesheet" href="../content/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../content/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../content/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../content/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../content/css/custom.css">

    <link rel="stylesheet" href="../content/css/xadmin.css">
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>



</head>

<body>
    <div id="app">
        <header class="page-header">
            <div class="container-fluid">
                <h2 class="no-margin-bottom">报表统计</h2>
            </div>
        </header>
        <p style="float: right;padding: 10px;">

            <button class="btn btn-primary" @click="daili">代理报表</button>
        </p>

        <section class="dashboard-counts no-padding-bottom" style="clear: both;">

            <div class="container-fluid">
                日期：
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" autocomplete="off" id="mydate" placeholder=" - ">

                </div>
                <button class="layui-btn" @click="searchdata"><i class="layui-icon">&#xe615;</i></button>

                <div class="row bg-white has-shadow">
                    <!-- Item -->

                    <!-- Item -->
                    <div class="col-xl-4 col-sm-6">
                        <div class="item d-flex align-items-center">
                            <div class="icon bg-red"><i class="icon-padnote"></i></div>
                            <div class="title"><span>销售总额<br></span>

                            </div>
                            <div class="number" v-cloak><strong>{{info.paymoney_day}}</strong></div>
                        </div>
                    </div>
                    <!-- Item -->
                    <div class="col-xl-4 col-sm-6">
                        <div class="item d-flex align-items-center">
                            <div class="icon bg-green"><i class="icon-bill"></i></div>
                            <div class="title"><span>订单数<br></span>

                            </div>
                            <div class="number" v-cloak><strong>{{info.ordernum_day}}</strong></div>
                        </div>
                    </div>
                    <!-- Item -->
                    <div class="col-xl-4 col-sm-6">
                        <div class="item d-flex align-items-center">
                            <div class="icon bg-orange"><i class="icon-check"></i></div>
                            <div class="title"><span>注册会员<br></span>

                            </div>
                            <div class="number" v-cloak><strong>{{info.usernum_day}}</strong></div>
                        </div>
                    </div>
                </div>
                <div class="row bg-white has-shadow">
                    <!-- Item -->
                    <div class="col-xl-6 col-sm-6">
                        <div class="item d-flex align-items-center">

                            <div class="title">
                                <p style="font-size: 28px;;">商品统计</p>
                                <li>平台商品总数 {{info.goodsnum}}</li>
                                <li>库存警告总数 {{info.kucunerrnum}}</li>
                                <li>秒杀商品 {{info.miaonum}}</li>
                                <li>热销商品 {{info.hotnum}}</li>
                            </div>

                        </div>
                    </div>
                    <!-- Item -->
                    <div class="col-xl-6 col-sm-6">
                        <div class="item d-flex align-items-center">

                            <div class="title">
                                <p style="font-size: 28px;;">订单统计</p>
                                <li>总订单 {{info.ordernum}}</li>
                                <li>待付款 {{info.ordernum1}}</li>
                                <li>待发货 {{info.ordernum2}}</li>
                                <li>已发货 {{info.ordernum3}} </li>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!-- Dashboard Header Section    -->


    </div>
    <script src="../content/js/jquery-1.10.2.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>
    <script src="../content/plugin/echarts.min.js"></script>
    <script type="text/javascript" src="../content/js/moment.js"></script>

    <script>
        var timeScope;

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            timeScope = laydate.render({
                elem: '#mydate'
                , range: true
                , ready: function (date) {
                    console.log("1", date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                }
            });

        });

        var vm = new Vue({
            el: "#app",
            data: {
                info: {

                },
                search: {
                    mid: localStorage.getItem("mid")
                },


            },
            components: {
                'vue-nav': Vnav
            },
            mounted() {

                var time = moment().format("YYYY-MM-DD");
                $("#mydate").val(time + " - " + time);
                var that = this;
                that.gettj("");
            },
            methods: {
                searchdata: function () {
                    this.gettj();
                },
                gettj: function (_keycontent) {  //查询数据

                    var self = this;

                    var stime = $("#mydate").val().split(" - ")[0];
                    var etime = $("#mydate").val().split(" - ")[1];




                    this.search.stime = stime;
                    this.search.etime = etime;

                    $.post(apiurl + "/admin/order/tj", this.search, function (_result) {
                        console.log("_result", _result);
                        self.info = _result.data;
                    });


                },
                daili() {
                    location.href = "dailitj.html";
                }


            },
            created: function () {  //初始化事件里边去调用查询方法




            }
        });
        $(function () {



            //  chart5();
            // chart6();
        });
        function chart5(list) {

            var result = [];
            for (var i = 0; i < list.length; i++) {
                result.push([list[i].name, list[i].num]);

            }
            // $.post(apiurl + "/chart/shichang/laiyuan", vue.search, function (result) {
            // var result = { "status": 200, "data": [["衣服", 2], ["电子产品", 10], ["厨房用品", 5]] };


            //  console.log("来源", result.data);
            var chartContainer = document.getElementById("chart5");
            myChart = echarts.init(chartContainer);
            myChart.off('click')

            option = {
                color: ['#e2fcc5'],
                legend: {},
                tooltip: {},
                dataset: {
                    source: result
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    { type: 'bar', },


                ],
                axisLabel: {

                    interval: 0,

                    formatter: function (value) {

                        var ret = "";//拼接加\n返回的类目项 
                        var maxLength = 2;//每项显示文字个数
                        var valLength = value.length;//X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1)//如果类目项的文字大于3,
                        {
                            for (var i = 0; i < rowN; i++) {
                                var temp = "";//每次截取的字符串
                                var start = i * maxLength;//开始截取的位置
                                var end = start + maxLength;//结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    }
                }
            };




            myChart.setOption(option);




        }


        function chart6(result) {

            // $.post(apiurl + "/chart/b/shichang/laidiantime", vue.search, function (result) {

            var chartContainer = document.getElementById("chart6");

            myChart = echarts.init(chartContainer);
            myChart.off('click')

            var option = {
                dataZoom: {
                    title: "123"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {



                    }
                },
                legend: {


                },
                xAxis: [
                    {
                        type: 'category',
                        data: result.time,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '订单数',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    },
                    {
                        type: 'value',
                        name: '百分比',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '订单数',
                        type: 'line',
                        data: result.data
                    },

                ]
            };



            myChart.setOption(option);

            // });


        }

    </script>
</body>

</html>